<template>
  <div class="movie-detail" v-if="movie.title">
    <h2>{{ movie.title }}</h2>
    <img :src="movie.poster" :alt="movie.title" />
    <p>{{ movie.description }}</p>
    <p>评分: {{ movie.rating }}</p>
    <p>时长: {{ movie.duration }}</p>
    <router-link to="/">返回列表</router-link>
  </div>
  <div v-else class="loading">加载中...</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const movie = ref({})

onMounted(async () => {
  // 模拟从后端获取数据
  const mockMovieData = {
    id: route.params.id,
    title: '示例电影详情',
    poster: 'https://picsum.photos/300/450?random=detail',
    description: '这是示例电影的详细介绍。',
    rating: '8.5',
    duration: '120 分钟'
  }
  movie.value = mockMovieData
})
</script>

<style scoped>
.movie-detail {
  padding: 20px;
  text-align: center;
}

.movie-detail img {
  width: 300px;
  height: auto;
  border-radius: 8px;
  margin: 20px 0;
}
</style>